<template>
  <div class="">
    <a-space direction="vertical" :size="16" fill>
      <a-grid :cols="24" :col-gap="16" :row-gap="16">
        <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 18, xl: 18, xxl: 18 }">
          <DataOverview />
        </a-grid-item>
        <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 6, xl: 6, xxl: 6 }">
          <UserActions style="margin-bottom: 16px" />
          <ContentType />
        </a-grid-item>
      </a-grid>
      <DataChainGrowth />
      <ContentSource style="margin-bottom: 16px" />
    </a-space>
  </div>
</template>

<script setup>
  import DataOverview from './components/data-overview.vue';
  import DataChainGrowth from './components/data-chain-growth.vue';
  import UserActions from './components/user-actions.vue';
  import ContentType from './components/content-type.vue';
  import ContentSource from './components/content-source.vue';
</script>

<script>
  export default {
    name: 'Chart',
  };
</script>

<style scoped lang="less">

</style>
